<template>
<el-scrollbar style="height:100%" class="opration-container">
     <div class="opration">
        <div class="oprationLeft">
            <bs-rule-button-icon @click.native="showDeviceWarnRule"></bs-rule-button-icon>
            <bs-refresh-button-icon @click.native="refresh"></bs-refresh-button-icon>
            <device-warn-list-dialog></device-warn-list-dialog>
        </div>
        <div class="oprationRight">
            <el-form :inline="true" size="small" :model="queryData">
                <el-form-item>
                    <el-select v-model="queryData.queryType" :placeholder="$t('全部选项')" @clear="clear" clearable style="width:100px;">
                        <el-option v-for="(item, index) in searchItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input :placeholder="$t('请输入关键词搜索')" v-model="queryData.queryParam" clearable style="width:160px;">
                    <template slot="prepend"><i class="iconfont icon-sousuo" /></template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <bs-search-button-icon @click.native="search"></bs-search-button-icon>
                </el-form-item>
            </el-form>
        </div>
    </div>
</el-scrollbar>
</template>
<script>
import DeviceWarnListDialog from './DeviceWarnListDialog'
export default {
    name: 'DeviceWarnCondition',
    props:{
        queryData: {
            default: {}
        }
    },
    data() {
        return {
            searchItemData: [
                { name: '全部选项', value: 0 },
                { name: '终端名称', value: 1 },
                { name: 'MAC地址', value: 2 },
                { name: '预警规则', value: 3 },
            ],
        }
    },
    mounted() {
        this.$nextTick(function() { 
        })
    },
    components :{
        DeviceWarnListDialog
    },
    methods:{
        showDeviceWarnRule() {
            const dataForm = {};
            this.$eventBus.$emit('showDeviceWarnRuleDialog', dataForm);
        },
        refresh() {
            this.$emit('refresh');
        },
        search(){
            this.queryData.page = 1
            this.$emit('search');
        },
        clear(){
            this.$set(this.queryData, 'queryType', 0)
            this.$set(this.queryData, 'queryParam', '')
        },
    },

}
</script>